
    class Banner{
        constructor(){
            this.left = document.querySelector(".left");
            this.right = document.querySelector(".right");
            this.imgbox = document.querySelector(".imgbox");

            this.width = this.imgbox.children[0].offsetWidth;
            this.len = this.imgbox.children.length;
            this.index = 0;
            this.setActive();
            this.addEvent();
        }
        setActive(){
            move(this.imgbox, {
                left: -this.index * this.width
            });
        }
        addEvent(){
            const that = this;
            this.left.onclick = function(){
                that.changeIndex(1)
            }
            this.right.onclick = function(){
                that.changeIndex(2);
            }
        }
        changeIndex(d){
            if(d === 1){
                if(this.index === 0){
                    this.index = this.len-1;
                }else{
                    this.index--;
                }
            }else{
                if(this.index === this.len-1){
                    this.index = 1;
                    this.imgbox.style.left = 0;
                }else{
                    this.index++;
                }
            }
            this.setActive();
        }
    }
    new Banner();